import React, {useState, FC, useEffect} from 'react';
import UnitText from '../../component/UnitText';
import {Image, StyleSheet} from 'react-native';
import {Button, View, Icon} from '@ant-design/react-native';
import useStorage from '../../hooks/storage';
import {TUserInfo} from '../../type/TUser';
import ItemList from '../../component/ItemList';
import Avatar from './Avatar';
import axios from '../../http/http';
import Behavior from './hehavior/Behavior';
type TUserConf = {
  title: string;
  value: string;
  status?: string;
  navigation?: string;
  disabled?: boolean;
  default?: string;
  popup?: boolean;
};
const HasLogin: FC<{userInfo: TUserInfo; navigation: any}> = ({
  userInfo: {avatar, realname, username, email},
  navigation,
}) => {
  useEffect(() => {
    navigation.addListener('blur', () => {
      setVisible(false);
    });
  }, [navigation]);

  const userInfoStorage = useStorage<TUserInfo>('userInfo');
  const tokenStorage = useStorage<string>('token');
  const [visible, setVisible] = useState(false);
  const userConfig: Array<TUserConf> = [
    {title: '头像', value: avatar, status: 'img', popup: true},
    {title: '用户名', value: username, disabled: true},
    {title: '昵称', value: realname, navigation: '修改昵称'},
    {title: '邮箱', value: email, default: '去设置', navigation: '修改邮箱'},
    {title: '我的足迹', value: '', default: '', navigation: '我的足迹'},
  ];
  const userDoConfig = [
    {title: '点赞'},
    {title: '收藏'},
    {title: '评论'},
    {title: '留言'},
  ];
  const logout = () => {
    userInfoStorage.clear();
    tokenStorage.clear();
  };
  const goNavigation = (item: TUserConf) => {
    console.log(item);
    item.navigation && navigation.push(item.navigation);
    item.popup && setVisible(true);
  };

  return (
    <View>
      <View style={styleUser.userBox}>
        {userConfig.map(item => {
          return (
            <View key={item!.title}>
              <ItemList
                onPress={() => goNavigation(item)}
                title={item!.title}
                disabled={item?.disabled}>
                {item!.status === 'img' ? (
                  <View
                    style={{
                      display: 'flex',
                      flexDirection: 'row',
                      alignItems: 'center',
                    }}>
                    <Image
                      style={{width: 40, height: 40, borderRadius: 40}}
                      source={{uri: item!.value}}
                    />
                    <Icon
                      name="arrow-right"
                      size="md"
                      color="#aaa"
                      style={{marginLeft: 16}}
                    />
                  </View>
                ) : (
                  <View style={{display: 'flex', flexDirection: 'row'}}>
                    <UnitText
                      TStyle={
                        item?.disabled ? {color: '#aaa'} : {color: '#51a5f2'}
                      }>
                      {item?.value || item?.default}
                    </UnitText>
                    {!item?.disabled && (
                      <Icon
                        name="arrow-right"
                        size="md"
                        color="#aaa"
                        style={{marginLeft: 16}}
                      />
                    )}
                  </View>
                )}
              </ItemList>
            </View>
          );
        })}
      </View>
      <Button type="warning" style={{marginTop: 10}} onPress={logout}>
        退出登录
      </Button>
      <Avatar visible={visible} close={setVisible} />
    </View>
  );
};
const styleUser = StyleSheet.create({
  userBox: {
    backgroundColor: '#fff',
    borderRadius: 10,
    overflow: 'hidden',
  },
  behaviorBox: {
    marginTop: 16,
    backgroundColor: '#fff',
    borderRadius: 10,
    overflow: 'hidden',
  },
});
export default HasLogin;
